<template>
  <a-form-model
    ref="form"
    :model="form"
    :rules="formRules"
    :hideRequiredMark="title == '详情'"
  >
    <div class="form-content">
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="沥青名称：" prop="lqType">
            <a-select
              placeholder="请选择沥青名称"
              v-model="form.lqType"
              @change="changeLqType"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in lqTypesList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="沥青混合料种类：" prop="mxeType">
            <a-select
              placeholder="请选择沥青混合料种类"
              v-model="form.mxeType"
              @change="changeMxeType"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in mxeTypeList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="公路等级：" prop="roadLevel">
            <a-select
              placeholder="请选择公路等级"
              v-model="form.roadLevel"
              @change="changeRoadLevel"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in roadLevelList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="交通路段分类：" prop="trafficType">
            <a-select
              placeholder="请选择交通路段分类"
              v-model="form.trafficType"
              @change="changeTrafficType"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in trafficTypeList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="沥青气候分区：" prop="weatherRegion">
            <a-select
              placeholder="请选择沥青气候分区"
              v-model="form.weatherRegion"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in weatherRegionList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="施工桩号：">
            <a-input
              placeholder="请输入施工桩号"
              v-model="form.pileNo"
              :disabled="title == '详情'"
              :maxLength="200"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="左右幅：">
            <a-select
              allowClear
              placeholder="请选择左右幅"
              v-model="form.leftOrRight"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in leftOrRightsList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="试验依据：">
            <a-input
              placeholder="请输入试验依据"
              v-model="form.trialBasis"
              :disabled="title == '详情'"
              :maxLength="100"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="摊铺层级：">
            <a-input
              placeholder="请输入摊铺层级"
              v-model="form.pavingLevel"
              :disabled="title == '详情'"
              :maxLength="200"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
  </a-form-model>
</template>
<script>
import { trialInfo, lqmxeInfo } from "@/api/wisdom-beam/trial-app";
export default {
  props: ["title", "trialNum"],
  watch: {
    trialNum: {
      handler(val) {
        if (val) {
          this.trialInfo();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        lqType: undefined, //沥青类型
        mxeType: undefined, //沥青混合料种类
        roadLevel: undefined, //公路等级
        trafficType: undefined, //交通路段分类
        weatherRegion: undefined, //沥青气候分区
        pileNo: "", //施工桩号
        leftOrRight: undefined, //左右幅
        trialBasis: "", //试验依据
        pavingLevel: "", //摊铺层级
      },
      formRules: {
        lqType: [
          {
            required: true,
            message: "请选择沥青类型",
            trigger: "change",
          },
        ],
        mxeType: [
          {
            required: true,
            message: "请选择沥青混合料种类",
            trigger: "change",
          },
        ],
        roadLevel: [
          {
            required: true,
            message: "请选择公路等级",
            trigger: "change",
          },
        ],
        trafficType: [
          {
            required: true,
            message: "请选择交通路段分类",
            trigger: "change",
          },
        ],
        weatherRegion: [
          {
            required: true,
            message: "请选择沥青气候分区",
            trigger: "change",
          },
        ],

        temperature: [
          {
            required: true,
            message: "请选择延度温度值",
            trigger: "change",
          },
        ],

        produceDate: [
          {
            required: true,
            message: "请选择制件日期",
            trigger: "change",
          },
        ],
        designStrength: [
          {
            required: true,
            message: "请选择设计强度",
            trigger: "change",
          },
        ],
        curingAge: [
          {
            required: true,
            message: "请选择养护龄期",
            trigger: "change",
          },
        ],
      },
      lqTypesList: [],
      mxeTypeList: [],
      roadLevelList: [],
      trafficTypeList: [],
      weatherRegionList: [],
      leftOrRightsList: [],
    };
  },
  mounted() {
    this.form = {
      lqType: undefined, //沥青类型
      mxeType: undefined, //沥青混合料种类
      roadLevel: undefined, //公路等级
      trafficType: undefined, //交通路段分类
      weatherRegion: undefined, //沥青气候分区
      pileNo: "", //施工桩号
      leftOrRight: undefined, //左右幅
      trialBasis: "", //试验依据
      pavingLevel: "", //摊铺层级
    };
  },
  methods: {
    validateHandle() {
      let status = "";
      this.$refs["form"].validate((val) => {
        if (val) {
          status = true;
        } else {
          status = false;
        }
      });
      return status;
    },
    // 公路等级切换，获取沥青气候分区列表
    changeTrafficType(value) {
      this.form.weatherRegion = undefined;
      this.lqmxeInfo(
        4,
        this.form.lqType,
        this.form.mxeType,
        this.form.roadLevel,
        value
      );
    },
    // 公路等级切换，获取交通路段分类列表
    changeRoadLevel(value) {
      this.form.trafficType = undefined;
      this.form.weatherRegion = undefined;
      this.lqmxeInfo(3, this.form.lqType, this.form.mxeType, value);
    },
    // 沥青混合料种类切换，获取公路等级列表
    changeMxeType(value) {
      this.form.roadLevel = undefined;
      this.form.trafficType = undefined;
      this.form.weatherRegion = undefined;
      this.lqmxeInfo(2, this.form.lqType, value);
    },
    // 沥青名称切换，获取沥青混合料种类列表
    changeLqType(value) {
      this.form.mxeType = undefined;
      this.form.roadLevel = undefined;
      this.form.trafficType = undefined;
      this.form.weatherRegion = undefined;
      this.lqmxeInfo(1, value);
    },
    // 试验信息
    trialInfo() {
      trialInfo({
        trialNum: this.trialNum,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.lqTypesList = result.lqTypes || [];
          this.leftOrRightsList = result.leftOrRights || [];
        })
        .catch((_) => {});
    },
    // 沥青马歇尔信息
    lqmxeInfo(type, lqType, mxeType, roadLevel, trafficType) {
      lqmxeInfo({
        trialNum: this.trialNum,
        lqType,
        mxeType,
        roadLevel,
        trafficType,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          if (type == 1) {
            this.mxeTypeList = result || [];
          }
          if (type == 2) {
            this.roadLevelList = result || [];
          }
          if (type == 3) {
            this.trafficTypeList = result || [];
          }
          if (type == 4) {
            this.weatherRegionList = result || [];
          }
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.form-content {
  padding: 0 120px 0 20px;
}
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 160px;
    min-width: 160px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    align-items: center;
    height: 36px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 126px;
    .ant-select-selection__rendered {
      height: 126px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
